layui.use(['flow', 'form', 'layer', 'upload'], function() {
	var flow = layui.flow,
		form = layui.form,
		layer = parent.layer === undefined ? layui.layer : top.layer,
		upload = layui.upload,
		$ = layui.jquery;

	//流加载图片
	var imgNums = 12; //单页显示图片数量

	flow.load({
		elem: '#Images', //流加载容器
		done: function(page, next) { //加载下一页
			$.get("../../json/images.json", function(res) {
				//模拟插入
				var imgList = [],
					data = res.data;
				var maxPage = imgNums * page < data.length ? imgNums * page : data.length;
				setTimeout(function() {
					for (var i = imgNums * (page - 1); i < maxPage; i++) {
						imgList.push('<li><div class="uploadImgDiv"><img layer-src="' + data[i].src + '" src="' +
							data[i].thumb + '" alt="' + data[i].alt +
							'"></div><div class="operate"><div class="check"><input type="checkbox" name="belle" lay-filter="choose" lay-skin="primary" title="' +
							data[i].alt + '"></div><i class="layui-icon img_del">&#xe640;</i></div></li>');
						

					}
					

					next(imgList.join(''), page < (data.length / imgNums));
					form.render();
				}, 500);
			
			});
		}
	});

	//设置图片的高度

	// $(window).resize(function() {
	// 	$("#Images li .uploadImgDiv").css('overflow', 'hidden');
	// 	$("#Images li .uploadImgDiv").height($("#Images li img").width() * 0.56);
	// })

	//多图片上传
	upload.render({
		elem: '.uploadNewImg',
		url: '../../json/userface.json',
		multiple: true,
		before: function(obj) {
			//预读本地文件示例，不支持ie8
			obj.preview(function(index, file, result) {
				$('#Images').prepend('<li><div class="uploadImgDiv"><img layer-src="' + result + '" src="' + result +
					'" alt="' + file.name +
					'" class="layui-upload-img"></div><div class="operate"><div class="check"><input type="checkbox" name="belle" lay-filter="choose" lay-skin="primary" title="' +
					file.name + '"></div><i class="layui-icon img_del">&#xe640;</i></div></li>')
				
				form.render("checkbox");
			});
		},
		done: function(res) {
			//上传完毕
		}
	});

	//弹出层
	$("body").on("click", ".uploadImgDiv img", function() {
		 var imgSrc = $(this).attr('src');
		      //页面层
		      layer.open({
		        type: 1,
				title: '',
		         area: ['90%', '80%'], //宽高
		        shadeClose: true, //开启遮罩关闭
		        end: function (index, layero) {
		          return false;
		        },
		        content: '<div style="height:100%;display: flex;display: -webkit-flex;flex-direction: column;justify-content: center;align-items: center;"><img style="max-width:95%;height:auto;t" src="' + imgSrc + '" /></div>'
		      });

	
	})

	//删除单张图片
	$("body").on("click", ".img_del", function() {
		var _this = $(this);
		layer.confirm('确定删除图片"' + _this.siblings().find("input").attr("title") + '"吗？', {
			icon: 3,
			title: '提示信息'
		}, function(index) {
			_this.parents("li").hide(1000);
			setTimeout(function() {
				_this.parents("li").remove();
			}, 950);
			layer.close(index);
		});
	})

	//全选
	form.on('checkbox(selectAll)', function(data) {
		var child = $("#Images li input[type='checkbox']");
		child.each(function(index, item) {
			item.checked = data.elem.checked;
		});
		form.render('checkbox');
	});

	//通过判断是否全部选中来确定全选按钮是否选中
	form.on("checkbox(choose)", function(data) {
		var child = $(data.elem).parents('#Images').find('li input[type="checkbox"]');
		var childChecked = $(data.elem).parents('#Images').find('li input[type="checkbox"]:checked');
		if (childChecked.length == child.length) {
			$(data.elem).parents('#Images').siblings("blockquote").find('input#selectAll').get(0).checked = true;
		} else {
			$(data.elem).parents('#Images').siblings("blockquote").find('input#selectAll').get(0).checked = false;
		}
		form.render('checkbox');
	})

	//批量删除
	$(".batchDel").click(function() {
		var $checkbox = $('#Images li input[type="checkbox"]');
		var $checked = $('#Images li input[type="checkbox"]:checked');
		if ($checkbox.is(":checked")) {
			layer.confirm('确定删除选中的图片？', {
				icon: 3,
				title: '提示信息'
			}, function(index) {
				var index = layer.msg('删除中，请稍候', {
					icon: 16,
					time: false,
					shade: 0.8
				});
				setTimeout(function() {
					//删除数据
					$checked.each(function() {
						$(this).parents("li").hide(1000);
						setTimeout(function() {
							$(this).parents("li").remove();
						}, 950);
					})
					$('#Images li input[type="checkbox"],#selectAll').prop("checked", false);
					form.render();
					layer.close(index);
					layer.msg("删除成功");
				}, 2000);
			})
		} else {
			layer.msg("请选择需要删除的图片");
		}
	})

})
